import React from 'react';
import styles from './MyTasksPage.less';
import { connect } from 'dva';
import moment from 'moment';
import { List } from 'antd-mobile';
import { Helmet } from 'react-helmet';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import FilterControl from '../components/Base/FilterControl';

const Item = List.Item;

class MyTasksPage extends React.Component {

  componentWillMount() {
    let { branchPickerValue } = this.props.stat;
    branchPickerValue = branchPickerValue.length ? branchPickerValue : ['全部', moment().format('YYYY-MM')];
    this.filterControlsChange(branchPickerValue);
  }

  click = (type) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/myTasksContent',
      query: {
        type,
      },
    }));
  }

  click2 = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/myTasksRank',
    }));
  }

  toPosition = (roles) => {
    if (roles.indexOf('salesman') !== -1) {
      return <span style={{ backgroundColor: 'rgb(59, 219, 59)' }} className={styles.position}>店员</span>;
    } else if (roles.indexOf('manager') !== -1) {
      return <span style={{ backgroundColor: 'rgb(130, 72, 238)' }} className={styles.position}>店长</span>;
    } else if (roles.indexOf('supervisor') !== -1) {
      return <span style={{ backgroundColor: 'rgb(239, 85, 60)' }} className={styles.position}>督导</span>;
    } else if (roles.indexOf('operator') !== -1) {
      return <span style={{ backgroundColor: 'rgb(252, 193, 35)' }} className={styles.position}>运营</span>;
    } else if (roles.indexOf('boss') !== -1) {
      return <span style={{ backgroundColor: 'rgb(241, 75, 122)' }} className={styles.position}>老板</span>;
    }
  };

  filterControlsChange = (v) => {
    const startDate = moment(v[1]).startOf('month').format('YYYY-MM-DD');
    const endDate = moment(v[1]).add(1, 'months').startOf('month').format('YYYY-MM-DD');
    const { salemanId } = this.props.auth.currentUser;
    this.props.dispatch({
      type: 'stat/fetchStatTasks',
      payload: { saleMan: salemanId, startDate, endDate },
    });
  }

  render() {
    const { avatar, shopName, branchName, saleManName, username, roles } = this.props.auth.currentUser;
    const { needCount, count, successCount, realCount, expiredCount, successTotalMoney, completePercentage, successPercentage } = this.props.stat.statTasks;
    const { branchPickerValue } = this.props.stat;

    return (
      <Container title="我的回访">
        <Helmet>
          <title>我的回访</title>
        </Helmet>
        <div className={styles.top}>
          <img src={avatar || require("../assets/avatar.png")} alt="" />
          <div className={styles.salesman}>
            <div>
              <span>{saleManName || username || ''}</span>
              {this.toPosition(roles)}
            </div>
            <div>{shopName}-{branchName}</div>
          </div>
          {/* <div>{moment().format('YYYY.MM')}</div>*/}
        </div>

        <FilterControl
          filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch}
          hidePickerBranch
        />

        <div className={styles.list}>
          <span>{moment(branchPickerValue[1]).format('M')}月累计回访完成率</span>
          <span className={styles.right}>{(completePercentage || 0).toFixed(2)}%</span>
        </div>
        <List>
          <Item extra={needCount} arrow="horizontal" onClick={this.click.bind(this, 5)}>应回访客户数</Item>
          <Item extra={count} arrow="horizontal" onClick={this.click.bind(this, 2)}>实际回访客户数</Item>
          <Item extra={realCount} arrow="horizontal" onClick={this.click.bind(this, 1)}>待回访客户数</Item>
          <Item extra={expiredCount} arrow="horizontal" onClick={this.click.bind(this, 4)}>过期任务数</Item>
        </List>

        <div className={styles.list}>
          <span>{moment(branchPickerValue[1]).format('M')}月累计转化成功率</span>
          <span className={styles.right}>{(successPercentage || 0).toFixed(2)}%</span>
        </div>
        <List>
          <Item extra={successCount} arrow="horizontal" onClick={this.click.bind(this, 3)}>转化成功客户数</Item>
          <Item extra={(successTotalMoney || 0).toFixed(2)}>转化金额</Item>
        </List>

        <div className={styles.btn} onClick={this.click2}>查看排名</div>

      </Container>
    );
  }
}

export default connect(({ auth, task, stat }) => ({ auth, task, stat }))(MyTasksPage);
